<template>
  <div>
    <el-form ref="formDataRef" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="权限信息：" prop="menuIds">
        <!-- <el-checkbox
          v-model="menuExpand"
          @change="handleCheckedTreeExpand($event, 'menu')"
          >展开/折叠</el-checkbox
        >
        <el-checkbox
          v-model="menuNodeAll"
          @change="handleCheckedTreeNodeAll($event, 'menu')"
          >全选/全不选</el-checkbox
        >
        <el-checkbox
          v-model="form.menuCheckStrictly"
          @change="handleCheckedTreeConnect($event, 'menu')"
          >父子联动</el-checkbox
        > -->
        <el-tree
          class="tree-border"
          :data="menuOptions"
          show-checkbox
          ref="menu"
          node-key="id"
          :check-strictly="!form.menuCheckStrictly"
          empty-text="加载中，请稍候"
          :props="defaultProps"
          @check="currentChecked"
        ></el-tree>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["menuOptions"],
  data() {
    const validatorIds = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error("权限信息不能为空！"));
      } else {
        callback();
      }
    };
    return {
      rules: {
        menuIds: [
          { required: true, validator: validatorIds, trigger: "change" },
        ],
      },
      // 表单参数
      form: {
        menuIds: [],
        menuCheckStrictly: true,
      },
      defaultProps: {
        children: "childList",
        label: "menuName",
      },
      menuExpand: false,
      menuNodeAll: false,
    };
  },
  created() {},
  methods: {
    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value) {
      let treeList = this.menuOptions;
      for (let i = 0; i < treeList.length; i++) {
        this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value) {
      this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
    },
    // 树权限（父子联动）
    handleCheckedTreeConnect(value) {
      this.form.menuCheckStrictly = value ? true : false;
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      this.form.menuIds = checkedKeys;
      return checkedKeys;
    },
    currentChecked() {
      this.$refs.formDataRef.resetFields();
      this.getMenuAllCheckedKeys();
    },
    reset() {
      this.$refs.formDataRef.resetFields();
      this.menuExpand = false;
      this.handleCheckedTreeExpand(false);
      this.form.menuIds = [];
    },

    show(arr) {
      arr.forEach((v) => {
        this.$nextTick(() => {
          v.id = v.menuId;
          this.$refs.menu.setChecked(v, true, false);
          this.form.menuIds.push(v.id);
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.tree-border {
  border: 1px solid #dddddd;
  border-radius: 4px;
}
</style>
